<template>

	<div>

		<el-row>
		  <el-col :span="12">
		  
				<el-input v-model="searchForm.menuName"/>
		  </el-col>
		  <el-col :span="12">
			  
			  <el-button type="primary" @click="search()">查询</el-button>
			  
		  </el-col>
		</el-row>

		<el-button type="primary" @click="toAdd()" >添加</el-button>

		<!-- 向子组件传递数据 -->
		
		    
		<el-table :data="tableData" size="mini" style="width: 100%" v-loading="loading" >
			<el-table-column prop="menuId" label="菜单ID" align="center" width="180"> </el-table-column>
			<el-table-column prop="menuName" label="菜单名称" align="center"> </el-table-column>
			<el-table-column prop="url" label="页面路径" align="center"> </el-table-column>
			<el-table-column prop="parentId" label="上级id" align="center"> </el-table-column>
			<el-table-column prop="active" label="是否有效" align="center"> </el-table-column>
			<el-table-column prop="createtime" label="createtime" align="center"> </el-table-column>
			
			
			<el-table-column  label="操作" align="center">
				<template slot-scope="scope">
			
					<el-button type="primary" size="mini" @click="toEdit(scope.row.menuId)" >修改</el-button>
					<el-button type="waring" size="mini"  @click="deleteById(scope.row.menuId)">删除</el-button>
				</template>
			
			</el-table-column>

		</el-table>
		
		<el-pagination
		  background
		  @current-change="list()"
		   @size-change="search()"
		  layout="prev, pager, next,sizes"
		   :page-sizes="[5, 10, 20, 50]"
		  :current-page.sync="searchForm.pageNo"
		  :page-size.sync="searchForm.size"
		  :total="searchForm.total">
		</el-pagination>
		
		<el-dialog :visible.sync="visible" title="菜单编辑">  

			<Edit v-if="visible" :visible.sync="visible" @close="close" :id="id"></Edit>     
			
		</el-dialog>

	</div>


</template>

<script>
	import Edit from  './edit.vue'
	export default {
		name: 'Dept',
		components:{Edit},
		data() {
			return {
				searchForm:{
					pageNo:1,
					size:10,
					total:0,
					menuName:''
				},
				
				loading:false,
				id:'',
				visible:false,
				tableData:[]
				// tableData:[{"deptno":10,"menuName":"ACCOUNTING11222","loc":"测试修改方法"},{"deptno":20,"menuName":"RESEARCH---uuuu","loc":"DALLAS"},{"deptno":30,"menuName":"SALES","loc":"CHICAGO"},{"deptno":40,"menuName":"OPERATIONS","loc":"BOSTON"},{"deptno":60,"menuName":"testmenuName中文","loc":"loc"},{"deptno":80,"menuName":"DEV开发","loc":"Harbin哈尔滨"}]
			}
		},
		methods:{
			search(){
				
				//重置 页号
				this.searchForm.pageNo = 1;
				
				this.list();
				
			},
			deleteById(id){
				
				 this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
				          confirmButtonText: '确定',
				          cancelButtonText: '取消',
				          type: 'warning'
				        }).then(() => {
			
								this.$http({
								  method:'get',
								  url:'/api/menu?_type=deleteById&menuId='+id
								})  .then( (response)=> {
									 // let success  = response.data.success;
									let {success} = response.data;
								   if(success){
									 this.$message.success("删除成功");
									 this.list()
								   }
								}).catch((e)=>{
									console.log("失败的情况",e)
								});
						
						
						
				        }).catch(() => {
				                 
				        });
						
			},
			toAdd(){
				this.id = null;
				this.visible = true;
			},
			list(){
				
				this.loading = true;
				// 获取远端图片
				this.$http({
				  method:'get',
				  // url:'http://127.0.0.1:8080/server/dept?_type=list'
				  url:'/api/menu?_type=list&pageNo='+this.searchForm.pageNo+'&size='+this.searchForm.size+'&menuName='+this.searchForm.menuName
				})  .then((response) =>{
					this.loading = false;
					//response.data     List
					//response.data    page
				     // this.tableData = response.data;
				     const page = response.data;
					 this.tableData = page.data;
					 let {total ,pages,size,pageNo} = page;
					 this.searchForm.total = total;
				}).catch((e)=>{
					this.loading = false;
					console.log("失败的情况",e)
				});
			},
			close(){
				this.list()
			},
			toEdit(id){
				this.visible = true;
				this.id = id
			}
		},
		created() {
			console.log("this",this)
			this.list()
			
		}
	}
</script>

<style scoped>




</style>